---
title: Vite
description: A guide for installing and using Yamada UI with Vite.js projects
---

## Installation

::::steps

### Create application

Create Vite application.

:::code-group

```bash [pnpm]
pnpm create vite my-app --template react-ts
```

```bash [npm]
npm create vite my-app -- --template react-ts
```

```bash [yarn]
yarn create vite my-app --template react-ts
```

```bash [bun]
bun create vite my-app --template react-ts
```

:::

### Setup

Running the command will create the necessary files and folders in your project.

:::code-group

```bash [pnpm]
pnpm dlx @yamada-ui/cli init
```

```bash [npm]
npx @yamada-ui/cli init
```

```bash [yarn]
yarn dlx @yamada-ui/cli init
```

```bash [bun]
bunx @yamada-ui/cli init
```

:::

### Install the package

Install `@workspaces/ui` to your application.

:::code-group

```bash [pnpm]
pnpm add "@workspaces/ui@workspace:*"
```

```bash [npm]
npm install "@workspaces/ui@workspace:*"
```

```bash [yarn]
yarn add "@workspaces/ui@workspace:*"
```

```bash [bun]
bun add "@workspaces/ui@workspace:*"
```

:::

### Add provider

After installing, add `UIProvider` to the root of your application.

```tsx title="main.tsx" {4,8,10}
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App.tsx"
import { UIProvider } from "@workspaces/ui"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <UIProvider>
      <App />
    </UIProvider>
  </StrictMode>,
)
```

### Use components

After adding `UIProvider`, you can use the components in your application.

```tsx title="App.tsx" {1,4}
import { Button } from "@workspaces/ui"

function App() {
  return <Button>Click me!</Button>
}

export default App
```

That's it! You've successfully set up Yamada UI.

::::

## Scripts

### ColorModeScript

To use [Color Mode](/docs/theming/color-mode), you need to add `ColorModeScript` to the `body` to ensure it works correctly.

This is because color mode is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads.

```ts title="vite.config.ts" {1,4-18,22}
import type { Plugin } from "vite"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui"

function injectColorModeScript(): Plugin {
  return {
    name: "inject-color-mode-script",
    transformIndexHtml(html) {
      const content = getStorageScript(
        "colorMode",
        COLOR_MODE_STORAGE_KEY,
      )({ defaultValue: "light" })

      return html.replace("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectColorModeScript()],
})
```

If you change the `defaultColorMode` in your [config](/docs/theming/configuration/overview), set the `defaultValue` prop on `ColorModeScript`.

```ts title="vite.config.ts" {5,14}
import type { Plugin } from "vite"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

function injectColorModeScript(): Plugin {
  return {
    name: "inject-color-mode-script",
    transformIndexHtml(html) {
      const content = getStorageScript(
        "colorMode",
        COLOR_MODE_STORAGE_KEY,
      )({ defaultValue: config.defaultColorMode })

      return html.replace("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectColorModeScript()],
})
```

### ThemeSchemeScript

To use [theme switching](/docs/theming/switching-themes), you need to add `ThemeSchemeScript` to the `body` to ensure it works correctly.

This is because theme switching is implemented using `localStorage` or `cookies`, and adding the script ensures proper synchronization when the page loads.

```ts title="vite.config.ts" {1,4-18,22}
import type { Plugin } from "vite"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui"

function injectThemeSchemeScript(): Plugin {
  return {
    name: "inject-theme-scheme-scripts",
    transformIndexHtml(html) {
      const content = getStorageScript(
        "themeScheme",
        THEME_SCHEME_STORAGE_KEY,
      )({ defaultValue: "base" })

      return html.replace("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectThemeSchemeScript()],
})
```

If you change the `defaultThemeScheme` in your [config](/docs/theming/configuration/overview), set the `defaultValue` prop on `ThemeSchemeScript`.

```ts title="vite.config.ts" {5,14}
import type { Plugin } from "vite"
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui"
import { config } from "@workspace/theme"

function injectThemeSchemeScript(): Plugin {
  return {
    name: "inject-theme-scheme-scripts",
    transformIndexHtml(html) {
      const content = getStorageScript(
        "themeScheme",
        THEME_SCHEME_STORAGE_KEY,
      )({ defaultValue: config.defaultThemeScheme })

      return html.replace("<body>", `<body><script>${content}</script>`)
    },
  }
}

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), injectThemeSchemeScript()],
})
```
